<template>
  <el-dialog
    title="上传文件"
    center
    :close-on-click-modal="false"
    @close="closeHandle"
    width="30%"
    :visible.sync="visible">
    <el-form ref="form" label-width="120px">
      <el-form-item label="选择代理商">
        <el-select style="padding-bottom: 15px;"
                   clearable
                   v-model="selectAgentUserId" placeholder="请选择">
          <el-option
            :key="0"
            label="厂家"
            :value="0">
          </el-option>
          <el-option
            v-for="item in agentData"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>


    <el-upload
      drag
      :action="url"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      multiple
      :limit="1"
      :file-list="fileList"
      v-loading.fullscreen.lock="uploadLoading"
      :data="agentForm"
      style="text-align: center;">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只支持xlsx！</div>
    </el-upload>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      url: '',
      num: 0,
      successNum: 0,
      fileList: [],
      agentUserData: [],
      selectAgentUserId: '',
      uploadLoading: false,
      agentForm: {
        agentUserId: 0
      },
      agentData: []
    }
  },
  methods: {
    init (id) {
      this.url = this.$http.adornUrl(`/simcard/importSimCardExcel?token=${this.$cookie.get('token')}`)
      this.visible = true
      this.loadAgentUser()
      this.loadAgent()
    },
    loadAgent () {
      this.$http({
        url: this.$http.adornUrl('/deviceagent/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 100
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.agentData = data.page.list
        } else {
          this.agentData = []
        }
      })
    },
    loadAgentUser () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 100,
          'roleName': '代理商'
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.agentUserData = data.page.list
        } else {
          this.agentUserData = []
        }
      })
    },
    isNumber (val) {
      return typeof val === 'number' && !isNaN(val)
    },
    // 上传之前
    beforeUploadHandle (file) {
      if (!this.isNumber(this.selectAgentUserId)) {
        this.$message.error('请选择代理商')
        return false
      }
      this.agentForm.agentUserId = this.selectAgentUserId
      this.uploadLoading = true
      setTimeout(() => {
        this.uploadLoading = false
      }, 10000)
      this.num++
    },
    // 上传成功
    successHandle (response, file, fileList) {
      this.fileList = fileList
      this.successNum++
      this.uploadLoading = false
      if (response && response.code === 0) {
        this.$message.success('导入成功')
        this.fileList = []
        this.$emit('refreshDataList')
      } else {
        this.$message.error(response.msg)
      }
    },
    // 弹窗关闭时
    closeHandle () {
      this.fileList = []
      this.$emit('refreshDataList')
    }
  }
}
</script>
